Web Speech API Speech Recognition Demo

Made by the Pipe Recording Platform

This Web Speech API Speech Recognition Demo uses getUserMedia() and the Web Speech API's SpeechRecognition interface. It uses the following main SpeechRecognition properties: continuous, interimResults and lang.

How to use:

Grant camera + microphone permissions.
On Safari, you also need grant access to Speech Recognition by enabling Siri or Dictation in System Preferences or Settings.
Select a language (Default is english. Auto detection is also available)
Start a recording
Speak in the chosen language a few times
Stop the recording

Features:

Real-time captions while recording
Multi-language captions
Generated .rtt, .srt and .JSON files with the resulted transcription after a recording stops
Subtitle file generated and applied for the video playback

Language

Microphone

Works on:

Chrome 33+
Edge 79+
Safari 14.1+ on macOS
Safari on iOS 14.5+

Known issues:

No support for Firefox and Opera yet
Only works when connected to a network
It takes a few extra seconds for the Speech Recognition API to figure out when a non-english sentence ends

Links:

Web Speech API Text-to-Speech (Speech Synthesis) Demo
Web Speech API Article
MDN Docs
Browser support
Code for this demo on GitHub: https://github.com/addpipe/Web-Speech-API-SpeechRecognition-Demo